<template>
  <div class="logindetail">
    <div class="header">

      <span class="title">商家登录</span>
    </div>
    <div class="header-a"></div>
    <div class="face"><img :src="images4" class="images44"></div>
    <div class="phone">
      账号
      <input type="text" maxlength="11" v-model="phone" @blur="inputBlur">
    </div>
    <div class="verification">
      密码
      <input type="text"  v-model="code" @blur="inputBlur">
    </div>
    <div class="btn" @click="loginphone">登录</div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { Toast } from "mint-ui";
import pic4  from "../../icons/iconsss.png"
import * as api from "../../request/api.js";
export default {
  name: "shoplogin",
  data() {
    return {
       images4:pic4,
      time: 0,
      phone: "",
      num: "",
      data: "",
      code: ""
    };
  },
  computed: {
    ...mapState(["users"])
  },
  methods: {
    ...mapMutations(["loginSuccess"]),
    loginphone() {
      console.log(this.phone,this.code)
      this.$http({
        method: "post",
        url: api.SHOPLOGIN,
        data: {
          shopWorkerPhone: this.phone,
          shopWorkerPwd: this.code
        }
      })
        .then(resp => {
          console.log(resp);
          if(resp.data.code==-1){
            alert(resp.data.msg)
          }
          if (resp.data.success == true) {
           localStorage.setItem('shopWorkerName',resp.data.data.shopWorkerName)
           localStorage.setItem('shoptoken',resp.data.data.shopWorkerToken)
            this.$router.push({
              path: "/shop",
              query:{
                shopWorkerName:resp.data.data.shopWorkerName,
                shopWorkerPhone:resp.data.data.shopWorkerPhone
              }
            });
          } else {
            return false;
          }
          console.log(resp.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
         inputBlur () {
      // window.scroll(0, 0);
      setTimeout(() => {
        // alert(1);
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          return;
        }
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
          this.valRes = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
          this.valRes = 'android';
        }
        if (this.valRes === 'ios') {
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      }, 10);
    },
  },
  watch: {
    users(val) {
      if (val.isLogin === true) {
        const { redirect = "/shop" } = this.$route.params;
        this.$router.push(redirect);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../less/logindetail.less";
</style>
